import { useEffect, useState } from "react"
import { WindowSideMenuPropType } from "./types"
import styles from './styles.module.less'
import { getOptionRes } from "./fns"
import { useLocale } from "@/utils/hooks"
import { isString } from "lodash"
import { getClassNames, getStyles } from "magic-ui-react"

/**
 * 选择列表
 * @param props WindowSideMenuPropType
 * @returns 
 */
const WindowSideMenu = <T,>(props: WindowSideMenuPropType<T>) => {
  const {
    options,
    onChange,
    className,
    style,
    ...rest
  } = props

  const locale = useLocale()

  const [active, setActive] = useState(getOptionRes(options?.[0]))

  const classNameObj = {
    comp: getClassNames([
      styles.sideMenu,
      className,
    ])
  }

  const styleObj = {
    comp: getStyles([
      style,
    ])
  }

  useEffect(() => {
    onChange?.(active)
  }, [active])

  return (
    <aside style={styleObj.comp} className={classNameObj.comp} {...rest}>
      <ul>
        {options.length > 0 && options.map((option, index) => {
          const vlaue = getOptionRes(option)
          return (
            <li
              key={index}
              className={getClassNames([
                styles.sideMenuItem,
                {
                  [styles.sideMenuItemChecked]: vlaue === active
                }
              ])}
              onClick={() => {
                setActive(vlaue)
              }}
            >
              {
                isString(option) ?
                  locale(`global.${vlaue}` as any) :
                  getOptionRes(option, 'label')
              }
            </li>
          )
        })}
      </ul>
    </aside>
  )
}

export default WindowSideMenu